<template>
	<div class="modify-dialog">
		<slot>
			<el-button size="small" type="primary" @click="showDialog()">
				新增人员
			</el-button>
		</slot>
		<el-dialog :close-on-click-modal="false" v-bind="dialogOpts" :visible.sync="dialogVisible">
			<Form v-bind="formOpts" v-on="formEvent">
				<template #formBtn>
					<div class="dialog-footer">
						<el-button @click="dialogVisible = false">取 消</el-button>
						<el-button type="primary" @click="onSubmit"> 确 定 </el-button>
					</div>
				</template>
			</Form>
		</el-dialog>
	</div>
</template>

<script>
import modifyMixins from "@/mixins/modifyMixins.vue";
import { mapActions } from "vuex";
export default {
	mixins: [modifyMixins],
	data() {
		return {
			formKey: this.$quinn.guid(),
			form: {
				username: {
					tag: "el-input",
					label: "姓名",
					value: "",
					props: {
						clearable: true,
						placeholder: "请输入姓名",
					},
				},
				mobile: {
					tag: "el-input",
					label: "手机号码",
					value: "",
					props: {
						type: "tel",
						clearable: true,
						placeholder: "请输入手机号码",
					},
				},
				roleId: {
					tag: "el-select",
					label: "角色",
					value: "",
					items: this.getItems(),
					props: {},
				},
				area: {
					tag: "el-select",
					label: "省区",
					value: "",
					items: this.getArea(),
					props: {
						clearable: true,
					},
				},
				leader: {
					tag: "el-select",
					label: "上级",
					value: "",
					items: this.getItems("leaderMap"),
				},
				password: {
					tag: "el-input",
					label: "密码",
					value: "",
					props: {
						clearable: true,
						showPassword: true,
						placeholder: "请输入密码",
					},
				},
			},
		};
	},
	computed: {
		title() {
			const { modify } = this;
			if (modify === "edit") return "编辑";
			if (modify === "editPsd") return "修改密码";
			return "新增";
		},
	},
	watch: {
		form: {
			deep: true,
			immediate: true,
			handler(val) {
				if (!val.roleId.hidden) {
					this.form.leader.hidden = val.roleId.value != 3;
				}
			},
		},
		"$store.state.areaMap": function () {
			if (this.form.area) {
				this.form.area.items = this.getArea("areaList");
				this.formKey = this.$quinn.guid();
			}
		},
		"$store.state.roleMap": function () {
			if (this.form.roleId) {
				this.form.roleId.items = this.getItems();
				this.formKey = this.$quinn.guid();
			}
		},
		"$store.state.leaderMap": function () {
			if (this.form.leader) {
				this.form.leader.items = this.getItems("leaderMap");
				this.formKey = this.$quinn.guid();
			}
		},
	},
	methods: {
		...mapActions(["refreshAccount", "refreshLeader"]),
		getItems(key = "roleMap") {
			const selectMap = this.$store.state[key];
			let keys = Object.keys(selectMap);
			return keys.map((value) => ({
				value: value - 0,
				label: selectMap[value],
			}));
		},
		getArea(){
			const data = this.$store.state.areaList;
			return data.map((el)=>({
				value:el.area,
				label:el.areaName
			}))
		},
		submitDone() {
			this.dialogVisible = false;
			this.$emit("change");
			this.refreshAccount();
			this.refreshLeader();
		},
		onSubmit(form) {
			const { modify, row } = this;
			const { id } = row;
			const f = JSON.parse(JSON.stringify(form));
			delete f.area;
			if (Object.values(f).some((v) => !v)) return this.$message("请填写完整");
			if (modify === "add") {
				const { roleId = "", ...rest } = form;
				this.$api.addAccount(rest).then(({ id }) => {
					if (roleId)
						this.$api
							.setAccountRole({
								accountId: parseInt(id),
								roleList: [roleId],
							})
							.then(this.submitDone);
					else this.submitDone();
				});
			} else if (modify === "edit") {
				const { roleId = "", ...rest } = form;
				this.$api.patchAccount({ ...rest, id }).then(() => {
					if (roleId)
						this.$api
							.setAccountRole({
								accountId: parseInt(id),
								roleList: [form.roleId],
							})
							.then(this.submitDone);
					else this.submitDone();
				});
			} else if (modify === "editPsd") {
				this.$confirm("确认修改密码？").then((res) => {
					this.$api.updatePsd({ ...form, id }).then(this.submitDone);
				});
			}
		},
		showDialog(modify = "add", row = {}) {
			this.dialogVisible = true;
			this.row = row;
			this.modify = modify || "add";
			for (const key in this.form) {
				let defValue = "";
				if (Array.isArray(this.form[key].value)) defValue = [];
				if (Object.hasOwnProperty.call(row, key))
					this.form[key].value = row[key] || defValue;
				else this.form[key].value = defValue;
			}
			const map = {
				add: ["username", "mobile", "roleId", "password", "area"],
				edit: ["username", "mobile", "roleId"],
				editPsd: ["password"],
			};
			if (map[modify])
				map[modify].forEach((key) => {
					this.form[key].hidden = false;
				});
			this.formKey = this.$quinn.guid();
		},
	},
};
</script>

<style lang="less" scoped></style>

